<template>
    <div>
        <!-- 搜索框 -->
        <van-search v-model="keyword" placeholder="请输入搜索关键词" show-action @search="onSearch">
            <div slot="action" @click="onSearch">搜索</div>
        </van-search>
        <!-- 轮播图 -->
        <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(item,index) in  slides" :key='index'>
                <img :src="item" />
            </van-swipe-item>
        </van-swipe>

        <!-- 九宫格导航 -->
        <van-row>
            <van-col span="6">
                <div @click="go('/intheaters')">
                    <img src="../../../static/img/icon/menu1.png" alt="">
                    <p>正在热映</p>
                </div>
            </van-col>
            <van-col span="6">
                <div @click="go('/comingsoon')">
                    <img src="../../../static/img/icon/menu2.png" alt="">
                    <p>即将上映</p>
                </div>
            </van-col>
            <van-col span="6">
                <div @click="go('/top250')">
                    <img src="../../../static/img/icon/menu4.png" alt="">
                    <p>TOP250</p>
                </div>
            </van-col>

            <van-col span="6">
                <div @click="go('/usbox')">
                    <img src="../../../static/img/icon/menu3.png" alt="">
                    <p>北美票房</p>
                </div>
            </van-col>
             <van-col span="6">
                <div @click="go('/ranking')">
                    <img src="../../../static/img/icon/menu5.png" alt="">
                    <p>票房排行</p>
                </div>
            </van-col> 
            <!--<van-col span="6">
                <div @click="go('/weekly')">
                    <img src="../../../static/img/icon/menu6.png" alt="">
                    <p>口碑榜</p>
                </div>
            </van-col>-->

        </van-row>

        <van-cell-group>
            <van-cell :title="itemTitle" icon="wap-nav" />
        </van-cell-group>
        <van-row>
            <van-col span="12" v-for="item in list" :key="item.id"  @click.native="showDetail(item.id)">
                <div class="movie-item">
                    <div class="movie-poster">
                        <img :src="item.images.small">
                    </div>
                    <p>
                        {{item.title|substr(6)}}&nbsp;&nbsp;
                        <van-tag plain type="danger">{{item.year}}</van-tag>
                    </p>
                    <p>
                        <van-tag mark type="danger" v-for="val in item.genres" :key="val">{{val}}</van-tag>
                    </p>

                </div>
            </van-col>
        </van-row>
    </div>
</template>
<script>
import Vue from "vue";

import {getMovieList,getMockList} from  '../../api/api.js'

import { Swipe, SwipeItem } from "vant";
import { Row, Col } from "vant";
import { Tag } from "vant";
import { Icon } from "vant";
import { Search } from "vant";
import { Toast } from 'vant';
import { Cell, CellGroup } from "vant";


Vue.use(Row)
    .use(Col)
    .use(Tag)
    .use(Icon)
    .use(Swipe)
    .use(SwipeItem)
    .use(Search)
    .use(Toast)
    .use(Cell)
    .use(CellGroup);

export default {
    data() {
        return {
            itemTitle: "正在热映",
            list: [],
            slides: [
                "/static/img/slides/1.jpg",
                "/static/img/slides/2.jpg",
                "/static/img/slides/3.jpg",
                "/static/img/slides/4.jpg"
            ],
            keyword: ""
        };
    },
    methods: {
        getList() {
            getMockList('in_theaters').then(res=>{
                this.list = res;
            });
        },
        go(path) {
            this.$router.push(path);
        },
        onSearch() {
            // console.log(this.keyword);
            if(this.keyword==''){
                Toast('请输入搜索关键词!');
            }else{
                // this.$router.push({
                //     path:'/search',
                //     params:{
                //         keyword:this.keyword
                //     }
                // });
                this.$router.push({ path: 'search', query: { keyword: this.keyword }})
            }
        },
        showDetail(movieId){
            this.$router.push({
                path:'/moviedetail',
                query:{id:movieId}
            });
        }
    },
    created() {
        this.getList();
    }
};
</script>
<style lang="less">
.van-row {
    .van-col {
        padding: 2px 10px;
        img {
            width: 100%;
            height: auto;
        }
        p {
            text-align: center;
        }
    }
}
</style>


